<template>
    <div class="releaseNews width-75">
        <h2 class="tc">{{release.mation.title}}</h2>
        <div v-html="release.mation.body">

        </div>
        <!--评论内容-->
        <div>
            <ul class="fs-24 c-3">
                <li class="m-t-18" v-for="list in release.comList" @click="revert(list.userTo.username , list.userTo.nickName)">
                    {{list.userTo.nickName}} : 
                        <span v-if="list.userIn != null">回复{{list.userIn.nickName}}</span>
                    {{list.body}}
                </li>
                <!--<li class="m-t-18">
                                    徐鸭丽回复胡海哥：哼，没有我厉害（傲娇脸）
                                </li>
                                <li class="m-t-18">
                                    猴登峰：都比我牛逼（丧气脸）
                                </li>-->
            </ul>
        </div>
        <!--input框-->
        <div class="m-t-28 dynamic-details">
            <input type="text" :placeholder="placeholder" class="dynamic-input b-0" v-model="talk">
            <span class="c-c2" @click="comment">确定</span>
        </div>
    </div>
</template>
<script>
import { z } from '../assets/js/common'
export default {
    data() {
        return {
            mationId: this.$route.query.mationId,
            release: "",   //保存资讯详情内容
            talk: "",   //评论要说的话
            userID:"",
            placeholder:"请输入评论",  //请输入评论  

        }
    },
    methods: {
        // 资讯的详情
        mation() {
            var params = new URLSearchParams();
            params.append("mationId", this.mationId);
            this.$http({
                method: "post",
                url: localPath + '/mation/findOne2',
                data: params
            }).then((data) => {


                // console.log(data);
                this.release = data.data;
                // var arr = data.data.message.rows;

            }).catch((error) => {
                console.log(error);
            })
        },
        // 评论
        comment() {
            var params = new URLSearchParams();
            params.append("mationId", this.mationId);
            params.append("body", this.talk);

            if(this.userID == ""){

            }else{
                params.append("userIn.username", this.userID);
            }

            this.$http({
                method: "post",
                url: localPath + '/mation/addCom',
                data: params
            }).then((data) => {
                console.log(data);
                // var arr = data.data.message.rows;
                this.talk = "";
                this.userID = ""; 
                this.placeholder = "";
                this.mation();

            }).catch((error) => {
                console.log(error);
            })
        },
        revert(username, who) {
            // 点击获取要回复人的ID
            this.userID = username;
            this.placeholder = "回复" + who;
            console.log(this.userID);
        },

    },
    mounted() {
        this.mation();
        document.addEventListener(z());
    },
}
</script>
<style>
.releaseNews img {
    max-width: 100%;
}

.dynamic-details {
    position: fixed;
    bottom: .1rem;
    width: 100%
}

.dynamic-input {
    width: 80%;
    font-size: .24rem;
    /* padding: .2rem; */
    /* height: .54rem; */
    background-color: #f4f4f4;
}
</style>
